<template>
    <div id="map"></div>
</template>

<script>

    import '@geoman-io/leaflet-geoman-free';
    import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
    import L from "leaflet";

    export default {
        name: "ex2",
        data() {
            return {
                map: null
            }
        },
        mounted() {

            // 地图初始化
            this.initMap()
        }, methods: {
            // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
            initMap() {
                let map = L.map("map", {
                    center: [24.485666, 118.095498], // 中心位置
                    zoom: 12, // 缩放等级
                    attributionControl: true, // 版权控件
                    zoomControl: true //缩放控件
                });
                this.map = map; // data上需要挂载
                L.tileLayer(
                    "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
                ).addTo(map) // 加载底图

                map.pm.addControls({
                    position: 'topleft',
                    drawCircle: false,
                });

                var mypop = L.popup();
                map.on('click', function (e) {
                    var content = '你临幸了这个点：<br>';
                    content += e.latlng.toString();
                    mypop.setLatLng(e.latlng)
                        .setContent(content)
                        .openOn(map);
                });

            }
        }
    }
</script>

<style scoped>

</style>